<template>
 <div style="z-index: -100;">
    <el-row :gutter="30">
        <el-col :span="3">
         <div style="position: fixed;">
            <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#FFFFFF"
            text-color="#000000"
            active-text-color="#FF0000"
          >
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">
                <router-link :to="{name: 'Vip'}">会员中心</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">
                <router-link :to="{name: 'Cookbook'}">发布菜谱</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-menu"></i>
              <span slot="title">
                <router-link :to="{name: 'Topics'}">话题</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-menu"></i>
              <span slot="title">
                <router-link :to="{name: 'Log'}">日志</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-setting"></i>
              <span slot="title">
                <router-link :to="{name: 'Menu'}">菜单</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="6">
              <i class="el-icon-setting"></i>
              <span slot="title">
                <router-link :to="{name: 'Collect'}">收藏</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="7">
              <i class="el-icon-setting"></i>
              <span slot="title">
                <router-link :to="{name: 'Setting'}">账户设置</router-link>
              </span>
            </el-menu-item>
          </el-menu>
         </div>
        </el-col>
        <el-col :span="14">
          <div style="position: relative;left: 18%;">
              <div>
                  <span style="margin-left:10px">
                    <font size="4">编辑菜谱</font>
                  </span>
                </div>
                <hr />
                <div style="margin-top:10px">菜谱名称</div>
                <el-input placeholder="请输入内容" style="width:50%;margin-top:10px" size="small"  v-model="cookbook.cbname" ></el-input>
                <div style="margin-top:10px">
                  <span>成品图片</span>
                 <el-upload class="avatar-uploader"
                  action="api/consumer-cookbook/hf_uplaod/uploadImage" 
                  :show-file-list="false"
                  :on-success="uploadSuccess" >
                  <img v-if="cookbook.finalcook != '' " :src="cookbook.finalcook" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
          
                 <div>
                    <font size="2" color="#888888">菜谱描述</font>
                  </div>
                  <div style="margin-top:10px">
                    <el-input
                      type="textarea"
                      :rows="7"
                      auto
                      v-model="cookbook.cbdescribe"
                      placeholder="请输入菜谱描述，最多500字"
                      style="height:159px;margin-top:10px"
                     
                    ></el-input>
                  </div>
                  <div style="margin-top:10px">
                    <div>基本参数</div>
                    <div style="margin-top:10px">
                      <!-- 绑在cookbook对象上的值 -->
                      <el-select v-model="cookbook.cbdifficulty.cbdid" clearable placeholder="难度" size="small" style="width:15%">
                        <!--查的值 -->
                        <el-option
                          v-for="dfty in difficulty" 
                          :key="dfty.cbdid"
                          :label="dfty.difficulty"
                          :value="dfty.cbdid">
                        </el-option>
                      </el-select>
                      <el-select
                        v-model="cookbook.cbtaste.cbtaid"
                        clearable
                        placeholder="口味"
                        size="small"
                        style="width:15%;margin-left:15px"
                      >
                        <el-option
                          v-for="ta in taste"
                          :key="ta.cbtaid"
                          :label="ta.taste"
                          :value="ta.cbtaid"
                        ></el-option>
                      </el-select>
                      <el-select
                        v-model="cookbook.cbcratf.cbcid"
                        clearable
                        placeholder="工艺"
                        size="small"
                        style="width:15%;margin-left:15px"
                      >
                        <el-option
                          v-for="c in cratf"
                          :key="c.cbcid"
                          :label="c.cratf"
                          :value="c.cbcid"
                        ></el-option>
                      </el-select>
                      <el-select
                        v-model="cookbook.cbtime.cbtid"
                        clearable
                        placeholder="耗时"
                        size="small"
                        style="width:15%;margin-left:15px"
                      >
                        <el-option
                          v-for="t in times"
                          :key="t.cbtid"
                          :label="t.times"
                          :value="t.cbtid"
                        ></el-option>
                      </el-select>
                      <el-select
                        v-model="cbtoid"
                        clearable
                        multiple
                        placeholder="厨具"
                        size="small"
                        style="margin-left:15px"
                      >
                        <el-option
                          v-for="t in tools"
                          :key="t.cbtoid"
                          :label="t.tools"
                          :value="t.cbtoid"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div style="margin-top:20px">
                    <div>
                      <font size="2" color="#888888">食材明细 （新功能：支持添加多组食材，并可以修改食材组名。）</font>
                    </div>
          
                    <div style="margin-top:10px">主料</div>
                    <div style="margin-top:10px" class="demo-input-suffix">
                      <el-row :gutter="0" v-for="(m,index) in cookbook.cbmainList" :key="index" >
                        <el-col :span="8" >
                          <el-input size="small" placeholder="主食名" v-model="m.main"  @focus="addmain(index)"></el-input>
                        </el-col>
                        <el-col :span="6">
                          <el-input size="small" placeholder="用量" v-model="m.levels"></el-input>
                        </el-col>
                      </el-row>
                    </div>
                    
                    <div style="margin-top:10px">辅料</div>
                    <div style="margin-top:10px" class="demo-input-suffix">
                      <el-row :gutter="0" v-for="(t,index) in cookbook.cbtrimList" :key="index">
                        <el-col :span="8">
                          <el-input size="small" placeholder="辅食名" v-model="t.trims"  @focus="addtrim(index)"></el-input>
                        </el-col>
                        <el-col :span="6">
                          <el-input size="small" placeholder="用量" v-model="t.levels"></el-input>
                        </el-col>
                        
                      </el-row>
                    </div>
                    <div style="margin-top:10px">
                      <el-button type="primary" plain size="small" @click="addFoodList()">添加食材组()</el-button>
                    </div>
                  </div>
                  <div style="margin-top:20px">
                     <div>
                      <font size="2" color="#888888">做法步骤*</font>
                    </div>
                    <div v-for="(detail,index) in cookbook.detailsList" :key="detail.index" @click="stepIndex(index)">
                       <el-upload class="avatar-uploader" 
                        action="/api/consumer-cookbook/hf_uplaod/uploadImage"  :show-file-list="false" :on-success="stepSuccess" >
                        <img v-if="detail.image != '' " :src="detail.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"><font size="2" style="display:block;margin-top:-100px">点击上传步骤图{{index + 1}}</font></i>
                      </el-upload>
                      <div style="float: right;width: 78%;margin-top: -182px;margin-left: 50x;">
                         <el-input type="textarea" :rows="8" auto v-model="detail.describes" placeholder="请输入步骤描述"></el-input>
                         <div style="position: relative;left: 99%;top:-70px">
                          <el-button type="" icon="el-icon-minus" size="mini" style="display: block;margin-left: 10px;margin-bottom: 3px;" 
                          title="移除当前步骤" 
                          @click="delStep(index)"
                          ></el-button>
                          <el-button type="" icon="el-icon-plus" size="mini" title="插入新步骤" @click="addstep(index)"></el-button>
                         </div>
                      </div>
                    </div>
                  </div>
                  <!-- 小窍门 -->
                  
                  <div style="margin-top:20px">
                    <div>
                      <font size="2" color="#888888">小窍门*</font>
                    </div>
                   <div style="position: relative;top: -20px;">
                    <el-input
                    type="textarea"
                    :rows="7"
                    auto
                    v-model="cookbook.suggest"
                    placeholder="此菜谱的一些小窍门，最多500字"
                    style="height:159px;margin-top:10px"
                  ></el-input>
                   </div>
                  </div>
                </div>
          </div>
        </el-col>
        <el-col :span="7" >
          <div style="position: fixed;left: 73%;">
              <div>
                  <font size="2" color="#888888">原创*</font>
                </div>
                <div>
                    <el-radio-group v-model="cookbook.cbtype" size="small" fill="rgb(255,141,141)">
                      <el-radio-button label="独家发布于欢乐美食" style="margin:10px" ></el-radio-button>
                      <el-radio-button label="首发于欢乐美食" style="margin:10px"></el-radio-button>
                      <el-radio-button label="原创作品" style="margin:10px"></el-radio-button>
                      <el-radio-button label="非原创作品" style="margin:10px"></el-radio-button>
                    </el-radio-group>
                  </div>
                  <div style="position: relative;top:50px;left: 30px;">
                      <el-button type="success" plain @click="submitCookBook()">发布菜谱</el-button>
                      <el-button type="danger" plain>重置菜谱</el-button>
                  </div>
          </div>
            
        </el-col>
      </el-row>
 </div>
</template>



<script>

import axios from "axios"
// 引入服务
import { Loading } from 'element-ui';

export default {
  data() {
    return {
      ruleForm: {
        // name: "",
        // password: "",
       
      },
      cbtoid:[],
      cookbook:{
        cbcratf: {
        cbcid: '',
        cratf: ""
        },
      cbdescribe: "",
      cbdifficulty: {
        cbdid: '',
        difficulty: ""
      },
      cbid: "",
      cbtype:'',
      cbmainList: [
      {
        cbid: "",
        cbmid: 0,
        levels: "",
        main: ""
      }
    ],
    cbname: "",
    cbtaste: {
      cbtaid: '',
      taste: ""
    },
    cbtime: {
      cbtid: '',
      times: ""
    },
    cbtoolList: [

  ],
    cbtrimList: [
      {
       cbid: "",
       cbtrid: 0,
       levels: "",
       trims: ""
      }
    ],
   detailsList: [
     {
        cbdid: 0,
        cbid: "",
        describes: "",
        image: "",
        step:1
     },{
        cbdid: "",
        cbid: 0,
        describes: "",
        image: "",
        step:2
     },{
        cbdid: 0,
        cbid: "",
        describes: "",
        image: "",
        step:3
     }
    ],
    finalcook: '',
    mid: 0,
    suggest: "",
    user: {
     headimage: "",
     password: "",
      petname: "sting",
      subscribes: "",
      uid: 0
   }
  },
      radio3: "3",
      stepindex: '',
    

      taste: [],//口味
      tools: [], //工具
      difficulty:[], //困难程度
      times:[], //时间
      cratf:[] , //工艺

      value: ""
    };
  },
  created(){
    this.getAll()// 获得所有的下拉框的数据
  },
  methods: {
    
     
    submitCookBook: function(){// 发布菜谱
     let loadingInstance  = Loading.service({ fullscreen: true,text: '正在上传'})
      this.cbtoid.forEach(t => {
            var tool =  { //使用变量接收数组，因为厨具是列表
                cbtoid: '',
                tools: ""
              }
        tool.cbtoid = t
        this.cookbook.cbtoolList.push(tool)
      });
      console.log(this.cookbook)
    
      //将数据传递给服务器进行持久化
      var URL = '/api/consumer-cookbook/cookbook_consumer/' 
      var url_addcookbook = URL + 'addCookBook'
      
      //移除主辅料最后的空白元素
    this.cookbook.cbmainList.pop()
    this.cookbook.cbtrimList.pop()
    this.cookbook.user.uid =this.$store.state.user.uid
if(this.cookbook.user.uid !== 0 || this.cookbook.user.uid !== undefined ){//有uid才上传
 axios.post(url_addcookbook,this.cookbook).then(res => {
        console.log(res.data + "上传成功了")
         loadingInstance.close()//关闭
          this.successMessage()
        var _this = this
        setTimeout(function(){
         _this.$router.push("/")
        },1000)

         this.cookbook.cbtoolList.length = 0

// 上传成功的一次优化

      })
}
     

    },
    restCookBook: function(){ //重置菜谱

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goBack() {
      console.log("go back");
    },
    handleRemove(file) {
      console.log(file);
    },
//  上传成品图成功的回调函数
    uploadSuccess: function(res) {
      this.cookbook.finalcook = res
      console.log("4444" + res)
      },
      // 上传步骤图的回显
      stepSuccess: function(res){
        this.cookbook.detailsList[this.stepindex].image = res
        console.log(res + "xxxxxxxxxxxx" + res )
      },

      stepIndex: function(index){
        this.stepindex = index; //做一个中转操作，供回显图片显示
      },

      // 新增和删除步骤
      delStep: function(index){
        if(this.cookbook.detailsList.length > 3){
          this.cookbook.detailsList.splice(index,1) // 删除指定位置
        }  else{
          this.stepError()
        } 
      },
      addstep: function(index){
        var s = {
        cbdid: 0,
        cbid: "",
        describes: "",
        image: "",
        step: index + 1
     }
     this.cookbook.detailsList.splice(index + 1,0,s) // 插入后面
      },
      // 添加一行新的主料输入框
    addmain: function(index){
      var m = {
        cbid: "",
        cbmid: 0,
        levels: "",
        main: ""
      }
      if(index == (this.cookbook.cbmainList.length - 1))
      this.cookbook.cbmainList.push(m)
      },
       // 添加一行新的辅料输入框
    addtrim: function(index){
      var t = {
       cbid: "",
       cbtrid: 0,
       levels: "",
       trims: ""
      }
       if(index == (this.cookbook.cbtrimList.length - 1))
      this.cookbook.cbtrimList.push(t)

      },
      // 获得所有的口味，工具等
      getAll: function(){
      
        var URL = '/api/consumer-cookbook/cookbook_consumer/' 

        var url_diff = URL + 'getAllCbdifficulty'
        axios.get(url_diff).then(res =>{ //难度
          this.difficulty = res.data
          console.log(this.difficulty)
        });
        var url_taste = URL + 'getAllCbtaste'
          axios.get(url_taste).then(res =>{ //口味
          this.taste = res.data
        });
        var url_tools = URL + 'getAllCbtool'
          axios.get(url_tools).then(res =>{ //工具
          this.tools = res.data
          console.log(this.tools)
        });
         var url_times = URL + 'getAllCbtime'
          axios.get(url_times).then(res =>{ //时间
          this.times = res.data
        });
        var url_cratf = URL + 'getAllcratf'
          axios.get(url_cratf).then(res =>{ //工艺
          this.cratf = res.data
        });

      },
      stepError() {
        this.$message({
          message: '最少要添加三个步骤',
          type: 'warning'
        });
      },
       successMessage() {
        this.$message({
          message: '菜谱上传成功，等待管理员审核！',
          type: 'success'
        });
      },
  }
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>